<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SOLUTION-ONLINE</title>
    <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
    <link rel="stylesheet" href="./css/ONLINE.css" type="text/css" />
    <link rel="stylesheet" href="../css/index.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css" />
</head>
<style type="text/css">
    .fakeloader{ position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 999;background-image: url(../bgAll/img/bg.png);}
</style>
<body class="wrap" style="overflow: hidden">
<div class="fakeloader"></div>
<div class="mod-star-list">
    <div class="inner"></div>
</div>
<!-- header Start -->
<div id="header" class="mt12 clearfix" style="margin-left:10px">
    <div class="header-left">
        <a href="EB.html" class="clearfix">
            <div class="bg-next rotate5 btn"></div>
            <p>浏览下一个方案</p>
        </a>
    </div>
    <div class="header-right">
        <div class="header-open">企业级互联网架构解决方案<span style="color:#90b8f1;font-size:14px"></span>
            <p>直播互动解决方案</p>
        </div>
    </div>
</div>

<div class="content">
    <div class="online-main" style="">
        <div class="online-main-top">
        </div>
        <div class="online-main-middle">
            <ul>
                <li>
                    <div class="dottedLine middle-first">
                        <ol class="first-ol">
                            <li><p><img src="img/ONLINE/PC.png"></p></li>
                            <li><p><img src="img/ONLINE/Phone.png"></p></li>
                            <li><p><img src="img/ONLINE/Pad.png"></p></li>
                            <li><p><img src="img/ONLINE/TV.png"></p></li>
                        </ol>
                        <div style="position: absolute;top: -50px;left: -10px">多终端接入SDK支持</div>
                    </div>
                    <div class="middle-second-ol">
                        <div class="middle-second-div">
                            <p>
                                <span>多媒体流</span>
                                <img src="img/ONLINE/bothway.png">
                            </p>
                        </div>
                        <div>
                            <p>
                                <img src="img/ONLINE/bothway.png">
                                <span>互动业务</span>
                            </p>
                        </div>
                    </div>
                </li>
                <li class="pull-right">
                    <div class="dottedLine middle-first">
                        <ol class="fifth-ol">
                            <li>
                                <div><p><img src="img/ONLINE/db0.png"></p></div>
                                <div><p><img src="img/ONLINE/db1.png"></p></div>
                                <div><p><img src="img/ONLINE/db2.png"></p></div>
                            </li>
                            <li>
                                <div><p><img src="img/ONLINE/ODPS.png"><br><span>ODPS</span></p></div>
                                <div><p><img src="img/ONLINE/ODPS.png"><br><span>TLOG</span></p></div>
                                <div><p><img src="img/ONLINE/ODPS.png"><br><span>JSTORM</span></p></div>
                            </li>
                        </ol>
                        <div style="position: absolute;top: -50px;left: 10%;">数据服务层</div>
                    </div>
                </li>
                <li class="pull-right">
                    <div class="dottedLine middle-first">
                        <ol class="fourth-ol">
                            <li><p><img src="img/ONLINE/oss.png"><br><span>OSS</span></p></li>
                            <li><p><img src="img/ONLINE/redis.png"><br><span>REDIS</span></p></li>
                            <li><p><img src="img/ONLINE/ocs.png"><br><span>OCS</span></p></li>
                            <li><p><img src="img/ONLINE/rds.png"><br><span>RDS</span></p></li>
                        </ol>
                        <div style="position: absolute;top: -50px;left: 10%;">存储服务层</div>
                    </div>
                    <div class="middle-second-ol">
                        <div class="middle-second-div">
                            <p>
                                <img src="img/ONLINE/leftLone.png">
                            </p>
                        </div>
                        <div>
                            <p>
                                <img src="img/ONLINE/left.png">
                            </p>
                        </div>
                    </div>
                </li>
                <li class="pull-right">
                    <div class="dottedLine middle-first">
                        <ol class="third-ol">
                            <li><p><img src="img/ONLINE/medie.png"><br><span>媒体转码</span></p></li>
                            <li><p><img src="img/ONLINE/EDAS.png"><br><span>EDAS</span></p></li>
                            <li><p><img src="img/ONLINE/drds.png"><br><span>DRDS</span></p></li>
                            <li><p><img src="img/ONLINE/seach.png"><br><span>开放搜索</span></p></li>
                        </ol>
                        <div style="position: absolute;top: -50px;left: 10%;">业务服务层</div>
                    </div>
                    <div class="middle-second-ol">
                        <div class="middle-second-div">
                            <p>
                                <img src="img/ONLINE/left.png">
                            </p>
                        </div>
                        <div>
                            <p>
                                <img src="img/ONLINE/leftLone.png">
                            </p>
                        </div>
                    </div>
                </li>
                <li class="pull-right">
                    <div class="dottedLine middle-first">
                        <ol class="second-ol">
                            <li class="second-ol-first"><p><img src="img/ONLINE/cdn.png"><br><span>CDN</span></p></li>
                            <li><p><img src="img/ONLINE/api.png"><br><span>API网关</span></p></li>
                            <li><p><img src="img/ONLINE/xiaoxi.png"><br><span>消息队列</span></p></li>
                        </ol>
                        <div style="position: absolute;top: -50px;left: 30%;">接入层</div>
                    </div>
                    <div class="middle-second-ol">
                        <div class="middle-second-div">
                            <p>
                                <img src="img/ONLINE/left.png">
                            </p>
                        </div>
                        <div>
                            <p>
                                <img src="img/ONLINE/leftLone.png">
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="coverage">
                <div class="dottedLine"></div>
                <div class="dottedLine twoCoverage"></div>
            </div>
        </div>
        <div class="online-main-bottom">
            <ol class="bottom-left">
                <li>
                    <img src="img/ONLINE/down.png">
                </li>
                <li>
                    <img src="img/ONLINE/xb.png">
                </li>
            </ol>
            <div class="bottom-right">
                <ul>
                    <li></li>
                    <li></li>
                    <li>多端实时数据采集</li>
                    <li></li>
                    <li>大数据分析引擎</li>
                    <li></li>
                    <li></li>
                </ul>
                <div>
                    <img src="img/ONLINE/Trun.png">
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="clearfix">
    <div class="footer-left fl">
        <a href="index.html" class="back shineAction"></a>
        <div class="backText">返回上一级</div>
    </div>
    <div class="footer-right fr">
        <a href="" class="refresh shineAction"></a>
        <div class="refreshText">刷新&nbsp;</div>
    </div>
</footer>

<script type="text/javascript" src="../bgAll/js/jquery-1.11.1.min.js"></script>
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script src="../bgAll/js/common.js"></script>
<script type="text/javascript" src="../bgAll/js/waypoints.js"></script>
<script type="text/javascript" src="../bgAll/js/star.js"></script>
<script type="text/javascript" src="js/ONLINE.js"></script>
<script type="text/javascript">
    var scaleNum=0;
    var financeLines = $('.finance-line');
    var scaleBox = function(){
        financeLines.removeClass('scaleClass').eq(scaleNum).addClass('scaleClass');
        if(scaleNum==0){
            scaleNum++;
        }else if(scaleNum==1){
            scaleNum++;
        }else{
            scaleNum=0;
        }
    }
    setInterval(scaleBox,1500);
</script>
</body>

</html>